<template>
    <div class="recordPage">
        <div class="guanziBox" :class="{'guanziBoxRotate':$store.state.stopPlay}">
            <img src="../../../assets/images/ganzi.png" alt="">
        </div>
        <div class="chanpianBox" :style="'AnimationPlayState:'+$store.state.stopPlayState">
            <div class="imgBox" v-if="detail">
                <img :src="detail.songs[0].al.picUrl" alt="">
            </div>
            <img src="../../../assets/images/changpian.png" alt="">
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            
        }
    },
    props:["detail"],
    methods: {
        
    },
   computed: {
       
   }
}
</script>

<style lang="scss" scoped>
    @import "~@/assets/css/common.scss";
    @keyframes chanpianBoxRotate{
        0%{
            transform: rotate(0) rotate3d(0,0,0,0);
        }
        100%{
            transform: rotate(360deg) rotate3d(0,0,0,0);
        }
    }
    .recordPage{
        color: white;
        position: relative;
        height: vw(432);
        .guanziBox{
            width: vw(100);
            font-size: 0;
            overflow: hidden;
            position: absolute;
            top: vw(30);
            left: 40%;
            z-index: 10;
            transform: rotate(-30deg) rotateZ(0);
            transform-origin: 0% 0%;
            transition: all .5s;
            img{
                width: 100%;
                display: block;
            }
        }
        .guanziBoxRotate{
            transform: rotate(0deg) rotateZ(0);
            transform-origin: 0% 0%;
            transition: all .5s;
        }
        .chanpianBox{
            width: 72%;
            font-size: 0;
            overflow: hidden;
            position: absolute;
            left: 50%;
            top: vw(130);
            margin-left: vw(-135);
            animation: chanpianBoxRotate 10s linear infinite;
            .imgBox{
                width: 42%;
                height: 42%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
                font-size: 0;
                overflow: hidden;
                z-index: -1;
                img{
                    width: 100%;
                    display: block;
                }
            }
            img{
                width: 100%;
                display: block;
            }
        }
    }

</style>